作為一名UI設(shè)計(jì)師,要合理使用留白分割、線性分割和卡片分割來(lái)提升頁(yè)面視覺效果和用戶體驗(yàn)。根據(jù)信息條目復(fù)雜度選擇合適的分割方式,以達(dá)到最佳的信息傳達(dá)效果。今天天健世紀(jì)科技小編就帶大家來(lái)看看UI設(shè)計(jì)中的留白準(zhǔn)則~
留白的設(shè)計(jì)準(zhǔn)則
留白和裁剪
裁掉主體物的一部分
將主題物的一部分裁掉,讓其鏡頭感更強(qiáng)??梢越o用戶表達(dá)出更多畫面蹦出的感覺。主題更突出,用戶就會(huì)更關(guān)注這個(gè)部分,從而達(dá)到排版者的目的。
留白和重心
重點(diǎn)功能周邊留白,有利于突出頁(yè)面的重心
在添加購(gòu)物車以及立即購(gòu)買按鈕的整行操作里,我們習(xí)慣上只放一個(gè)可操作按鈕且用購(gòu)買色來(lái)突出按鈕,目的就是讓用戶立刻下單,形成購(gòu)買行為。
留白和視覺流
留白影響視覺流
在網(wǎng)頁(yè)和三折頁(yè)設(shè)計(jì)中,經(jīng)常會(huì)有版塊之間的留白。那么精確的運(yùn)用版塊之間的留白,可以讓用戶的閱讀更有秩序性。也幫助用戶理解主題信息內(nèi)容。這個(gè)原則類似于眼動(dòng)儀。
留白和信息分組
利用留白給信息分組可以有效的讓用戶歸納分類
對(duì)相同的元素進(jìn)行版面設(shè)計(jì)時(shí),可以利用留白將要素之間的的間隔進(jìn)行擴(kuò)大或者縮小,可以很自然的進(jìn)行分組,給用戶的感覺也是分組認(rèn)知。
UI設(shè)計(jì)的排版準(zhǔn)則
層級(jí)提升瀏覽效率
運(yùn)用不同字號(hào)可以建立頁(yè)面的層次感
運(yùn)用DNA顏色可以強(qiáng)調(diào)重點(diǎn)內(nèi)容形成新的層級(jí);運(yùn)用購(gòu)買色可以突出價(jià)格等強(qiáng)元素。
重復(fù)-頁(yè)面 更加簡(jiǎn)潔規(guī)律
重復(fù)在頁(yè)面中多以控件形式出現(xiàn)
控件內(nèi)容包括圖片,文字,標(biāo)簽,icon等重復(fù)可以增加頁(yè)面的整體感和統(tǒng)一性。
對(duì)齊-更加直觀有秩序
APP頁(yè)面中,對(duì)齊真的是強(qiáng)有力的一種組織形式了
對(duì)齊可以讓頁(yè)面有一個(gè)視覺流,引導(dǎo)用戶自上而下進(jìn)行閱讀。常用的表現(xiàn)形式有:左對(duì)齊,右對(duì)齊以及居中對(duì)齊。
接近-關(guān)聯(lián)性強(qiáng)的元素整合
將功能和意思接近的元素組織在一起
進(jìn)行卡片分割,進(jìn)而整合在一個(gè)頁(yè)面里,這個(gè)就是接近原則。接近原則可以讓APP頁(yè)面的層級(jí)更加清晰,用戶的閱讀體驗(yàn)更佳。
微信公眾號(hào)
業(yè)務(wù)咨詢:400-9969-069(24小時(shí)服務(wù)) 028-86052918
售后熱線:028-86052836
公司地址:成都市武侯區(qū)天益街38號(hào)理想中心3棟1810